<template>
    <div class="container" style="width: 100%;">
        <el-form :inline="true" :model="activityForm" class="demo-form-inline">
            <el-form-item label="创建时间" prop="fundTimeArray">
                <el-date-picker v-model="activityForm.fundTimeArray" type="datetimerange" start-placeholder="Start date"
                    end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                    time-format="A hh:mm:ss" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="Query">搜索</el-button>
                <el-button type="info">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- Echarts -->
        <div ref="chartContainer" style="width: 1200px; height: 600px; margin: 20px"></div>
        <div>
            <!-- 表格 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="时间" width="200" />
                <el-table-column prop="bulking" label="商机增量" width="200" />
                <el-table-column prop="stock" label="商机存量" width="700" />
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, reactive } from 'vue';
import { ElMessage, TabsPaneContext } from 'element-plus';
import { business, businessSouSuo } from '../../../api/login';
import * as echarts from 'echarts';
import format from './format'

// 搜索
// 日期的
const activityForm = reactive({
    fundTimeArray: [],
    fundStartTime: [],
    fundEndTime: []
});
const date = ref([]);

watch(() => activityForm.fundTimeArray, (newVal: any) => {
    console.log('watch triggered'); // 调试信息
    console.log(newVal);
    // if (newVal && newVal.length === 2) {
    //     const formatTimeArray = newVal.map((el: any) => format.formDate(el));
    //     activityForm.fundStartTime = formatTimeArray[0];
    //     activityForm.fundEndTime = formatTimeArray[1];
    //     console.log(activityForm);
    // }
});
const Query = () => {
    businessSouSuo(date.value).then((res: any) => {
        if (res.code !== 200) return ElMessage.error("查询团队失败");
        tableData.value = res.rows;
    });
};

// 列表
const tableData = ref([]);

const getTeamList = () => {
    business().then((res: any) => {
        if (res.code !== 200) return ElMessage.error("查询线索失败");
        if (res.code = 200) {
            tableData.value = res.rows;
            console.log(res)
            // total.value = res.total;
        }
    });
};
onMounted(() => {
    getTeamList();
    initChart();
});


// 引用图表容器
const chartContainer = ref<HTMLElement | null>(null);
// 初始化 ECharts 图表
const initChart = () => {
    if (chartContainer.value) {
        const myChart = echarts.init(chartContainer.value);
        const option: echarts.EChartsOption = {
            title: {
                text: '商机分析'
            },
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                    ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                    ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                    ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                ]
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            grid: { top: '55%' },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {
                        focus: 'self'
                    },
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        myChart.setOption(option);

        myChart.on('updateAxisPointer', (event: any) => {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: `{b}: {@[${dimension}]} ({d}%)`
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
    }
};
</script>

<style lang="scss" scoped>
// 日期的
.demo-datetime-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

.demo-datetime-picker .block {
    padding: 30px 0;
    text-align: center;
}

.line {
    width: 1px;
    background-color: var(--el-border-color);
}
</style>